import { PageContainer } from '@ant-design/pro-components';
import React, { useRef, useState, useEffect } from 'react';
import { Card, Form, Input, Button, DatePicker, message, Radio, Row, Col } from 'antd';
import { useLocation } from 'react-router-dom';
import { userpagedetail, userpageadd } from '@/services/system/user';
import { useNavigate ,} from 'react-router-dom';
import moment from 'moment';
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => ({
  container: {
    padding: '24px',
    background: '#f5f5f5',
    minHeight: 'calc(100vh - 48px)',
  },
  card: {
    borderRadius: '8px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)',
  },
  form: {
    maxWidth: '800px',
    margin: '0 auto',
  },
  formItem: {
    marginBottom: '24px',
    '& .ant-form-item-label': {
      fontWeight: 500,
    },
  },
  input: {
    height: '40px',
    borderRadius: '6px',
  },
  datePicker: {
    width: '100%',
    height: '40px',
    borderRadius: '6px',
  },
  radioGroup: {
    display: 'flex',
    gap: '32px',
  },
  buttonGroup: {
    display: 'flex',
    justifyContent: 'center',
    gap: '16px',
    marginTop: '40px',
  },
  submitButton: {
    width: '120px',
    height: '40px',
    borderRadius: '6px',
  },
  cancelButton: {
    width: '120px',
    height: '40px',
    borderRadius: '6px',
  },
}));

const UserManageAdd: React.FC = () => {
  const { styles } = useStyles();
  const location = useLocation();
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const record = location.state?.record || {};
  const userData = record;

  const onFinish = async (values) => {
    try {
      const momentBirthday = moment(values.birthday.$d).format('YYYY-MM-DD');
      const response = await userpageadd({
        ...values,
        birthday: momentBirthday,
      });
      if (response.code === 200) {
        message.success('提交成功');
        navigate('/system/usermanage');
      }
    } catch (error) {
      console.error('提交失败:', error);
      message.error('提交失败');
    }
  };

  const handleCancel = () => {
    navigate('/system/usermanage');
  };

  return (
    <PageContainer
      header={{
        title: '新增用户',
        breadcrumb: {
          routes: [
            {
              path: '/system',
              breadcrumbName: '系统管理',
            },
            {
              path: '/system/usermanage',
              breadcrumbName: '用户管理',
            },
            {
              path: '',
              breadcrumbName: '新增用户',
            },
          ],
        },
      }}
    >
      <div className={styles.container}>
        <Card className={styles.card}>
          <Form
            form={form}
            layout="vertical"
            onFinish={onFinish}
            initialValues={userData}
            className={styles.form}
          >
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="userName"
                  label="用户名"
                  rules={[{ required: true, message: '请输入用户名' }]}
                  className={styles.formItem}
                >
                  <Input placeholder="请输入用户名" className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="name"
                  label="姓名"
                  rules={[{ required: true, message: '请输入姓名' }]}
                  className={styles.formItem}
                >
                  <Input placeholder="请输入姓名" className={styles.input} />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="sex"
                  label="性别"
                  className={styles.formItem}
                >
                  <Radio.Group className={styles.radioGroup}>
                    <Radio value="0">男</Radio>
                    <Radio value="1">女</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="birthday"
                  label="生日"
                  rules={[{ required: true, message: '请选择生日' }]}
                  className={styles.formItem}
                >
                  <DatePicker
                    placeholder="请选择生日"
                    className={styles.datePicker}
                    format="YYYY-MM-DD"
                  />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="phone"
                  label="手机号"
                  rules={[{ required: true, message: '请输入手机号' }]}
                  className={styles.formItem}
                >
                  <Input placeholder="请输入手机号" className={styles.input} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="email"
                  label="邮箱"
                  rules={[{ required: true, message: '请输入邮箱' }]}
                  className={styles.formItem}
                >
                  <Input placeholder="请输入邮箱" className={styles.input} />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item
              name="address"
              label="地址"
              rules={[{ required: true, message: '请输入地址' }]}
              className={styles.formItem}
            >
              <Input placeholder="请输入地址" className={styles.input} />
            </Form.Item>

            <div className={styles.buttonGroup}>
              <Button
                onClick={handleCancel}
                className={styles.cancelButton}
              >
                返回
              </Button>
              <Button
                type="primary"
                htmlType="submit"
                className={styles.submitButton}
              >
                提交
              </Button>
            </div>
          </Form>
        </Card>
      </div>
    </PageContainer>
  );
};

export default UserManageAdd;

